{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Register</title>
    <script src="{% static 'js/popper.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/vue.js' %}"></script>
    <script src="{% static 'js/element.js' %}"></script>

    <link rel="stylesheet" href="{% static 'css/element.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/common.css' %}">
  </head>
  <body>
    <div id="app" style="position: relative">
      <el-card class="box-card" style="margin: 150px auto">
        <div slot="header" class="clearfix">
          <span style="font-family: 楷体; font-weight: 600"
            >云起管理系统管理员注册入口</span
          >
          <el-button style="float: right; padding: 5px 0" type="text">
            <el-link type="primary" href="/login/">
              已有账号 ？去登录
            </el-link>
          </el-button>
        </div>
      {% if error %}
          <el-alert
            title="{{ error }}"
            type="error"
            close-text="知道了"
            style="width: 350px; margin: auto" >
          </el-alert>
      {% endif %}
        <form action="" method="post">
            {% csrf_token %}
          <div class="input-group mb-3" style="width: 300px; margin: 20px auto">
            <span class="input-group-text" id="basic-addon1">@</span>
            <input
              type="text"
              class="form-control"
              placeholder="Username"
              name="username"
              style="font-size: 13px;"
              v-model="userValue"
              @change="userBlur()"
            />
          </div>
          <div class="input-group mb-3" style="width: 300px; margin: 30px auto">
            <span class="input-group-text" id="basic-addon1">@</span>
            <input
              type="text"
              class="form-control"
              placeholder="Password"
              name="password"
              v-model="passValue"
              @change="passBlur()"
              style="font-size: 13px;"
            />
          </div>
        <div class="input-group mb-3" style="width: 300px; margin: 30px auto">
          <span class="input-group-text" id="basic-addon1">@</span>
          <input
            type="text"
            class="form-control"
            placeholder="Confirm The Password"
            name="confirm"
            v-model="confirmValue"
            style="font-size: 13px;"
            @change="confirmBlur()"
          />
          <input
            class="btn btn-primary"
            type="submit"
            value="register"
            :disabled="this.userValue === '' || this.passValue === '' || this.confirmValue === ''"
            style="width: 300px; margin: 30px auto; border-radius: 8px"
          />
        </div>
        </form>
      </el-card>
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: '#app',
      data: function () {
        return {
          userValue: '',
          passValue: '',
          confirmValue: '',
        }
      },
      computed: {
        isEmpty() {
          return !this.userValue.trim()
        },
        isPassEmpty() {
          return !this.passValue.trim()
        },
        isConfirmEmpty() {
          return !this.confirmValue.trim()
        }
      },
      methods: {
        userBlur() {
          if (this.isEmpty) {
            alert("用户名不能为空 !")
          }else if (this.userValue.length < 4 || this.userValue.length > 8) {
            alert("用户名长度范围要在 4 ~ 8 之间 ! ")
            this.userValue = ''
          }
        },
        passBlur() {
          if (this.isPassEmpty) {
            alert("密码不能为空 ! ")
          }else if (this.passValue.length < 6 || this.passValue.length > 16) {
            alert("密码长度范围要在 6 ~ 16 之间 ! ")
            this.passValue = ''
          }
        },
        confirmBlur() {
          if (this.isConfirmEmpty) {
            alert("请确认密码 !")
          }else if (this.passValue != this.confirmValue) {
            alert("密码不一致! ")
            this.confirmValue = ''
          }
        }
      },
    })
  </script>
</html>